<template>
  <!-- 顶部导航栏的事件拉框查询 -->
  <div @click="activeDraw">事件查询</div>
  <!-- 拉框之后的对话框
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog> -->
</template>

<script setup>
// 导入画笔
import { createDraw } from "../../../../../utils/createDraw.js";
// 导入Query查询工具
import { Query } from "../../../../../utils/Query.js";
// 导入app
import { app } from "../../../../../main";
// 设置事件点的三种颜色
import { TraEventManageHooks } from "../TrafficEventManage/TraEventManageHooks";
const { trafficEventStyle } = TraEventManageHooks();
// 画笔和画笔数据源的显隐
let showDrawAndSource = ref(false);
// 对话框的显隐
const dialogVisible = ref(false);
// 每次点击事件要素时得到的事件信息对象
const event_value = ref(null);
let $map = null;
// 事件高亮图层的数据源 //（等待mounted中注入）
let $evtSource = null;

// 创建画笔数据源
let sourceDraw = new ol.source.Vector({
  wrapX: false,
});
// 画笔图层
let draw_layer = new ol.layer.Vector({
  source: sourceDraw,
});
// 全局挂载 上方导航栏的事件查询拉框画笔图层，在EKeySearch关键词查询的复原按钮中使用
app.provide("$sourceDraw", sourceDraw);

onMounted(() => {
  $map = inject("$map");
  $map.addLayer(draw_layer);
  // 注入 $evtSource // 事件高亮图层的数据源 (来自ekeywords)
  $evtSource = inject("$evtSource");
});

let draw = ref(null);

// 函数：点击按钮后激活画笔
function activeDraw() {
  showDrawAndSource.value = !showDrawAndSource.value;
  // 如果画笔和数据源为true
  // 0.创建画笔之前先看一下有没有已经创建的画笔，如果有，先清除再创建 1.创建画笔 // 2.添加画笔 // 3.画笔结束事件
  if (showDrawAndSource.value) {
    // 0.创建画笔之前先看一下有没有已经创建的画笔，如果有，先清除之前的，再创建新画笔
    if (draw.value) {
      $map.removeInteraction(draw.value);
      // 每次移除画笔之后，再把draw.value设置为null，来标志着，当前的画笔已经清除。
      draw.value = null;
    }
    // 1.创建画笔
    draw.value = createDraw({
      type: "Box",
      source: sourceDraw,
    });
    // console.log(draw.value);
    // 2.添加画笔
    $map.addInteraction(draw.value);
    // 3. 画笔结束事件
    draw.value.on("drawend", (evt) => {
      // // 画笔结束，清空画笔的数据源，这样之前的框就消失了
      // sourceDraw.clear();
      // 把注入的事件数据源也清空
      // $evtSource.clear();
      // 获取画笔要素
      let geometry = evt.feature.getGeometry();
      //  设置查询图层 Point
      let service = {
        name: "guanggu",
        layerId: 2,
      };
      // 根据画笔要素查询Point图层
      Query.queryByGeom({
        geometry,
        service,
        success,
        type: "Box",
      });
      // 移除画笔
      $map.removeInteraction(draw.value);
      // 每次移除画笔之后，再把draw.value设置为null，来标志着，当前的画笔已经清除。
      draw.value = null;
    });
  } else {
    // 如果显示画笔和数据源为false
    // 1. 如果当前有画笔（还没画），那先清除画笔，再清除数据源。// 2. 如果当前没有画笔(已经画完了），那就只清除数据源
    if (draw.value) {
      //  1. 如果当前有画笔（还没画），那先清除画笔，再清除数据源。
      // 移除画笔
      $map.removeInteraction(draw.value);
      // 每次移除画笔之后，再把draw.value设置为null，来标志着，当前的画笔已经清除。
      draw.value = null;
      // 清除画笔数据源和高亮图层的数据源
      // 清除画笔数据源
      sourceDraw.clear();
      // 清除事件高亮图层的数据源
      $evtSource.clear();
    } else {
      // 2. 如果当前没有画笔(已经画完了），那就只清除数据源
      // 清除画笔数据源
      sourceDraw.clear();
      // 清除事件高亮图层的数据源
      $evtSource.clear();
    }
    
  }
}

//查询成功回调
function success(result) {
  let format = new Zondy.Format.PolygonJSON();
  //将MapGIS要素JSON反序列化为ol.Feature类型数组
  let features = format.read(result);
  // console.log(features); // [e,e] null
  if (features) {
    features.forEach((item) => {
      let styleTrafEvt = trafficEventStyle(item.values_.values_.处理状态);
      item.setStyle(styleTrafEvt);
      // console.log( item.values_.values_.处理状态);
    });
    $evtSource.addFeatures(features);
  }
}
</script>

<style lang="scss" scoped></style>
